import React,{useState,useEffect} from 'react';
import {StyleSheet, View, FlatList , Text} from 'react-native';
import {scaleSizeW,scaleSizeH,setSpText} from '../utils/ScreenUtil';
import FilmItem from '../components/FilmItem'
import { getHots } from '../services/film';

export default ({navigation}) => {
    const [hots,setHots] = useState([]);
    const [pagination,setPagination] = useState({
        current:1,
        size:3
    });
    const [fresh,setFresh] = useState(false);

    useEffect(() => {
        (async () => {
            let data = await getHots(1,3);
            console.log('data',data);
            setHots(data.rows);
            setPagination(data);
        })()
       
    },[]);
    const handleFresh = async () => {
        setFresh(true);
        
        let data = await getHots(parseInt(pagination.current) + 1,pagination.size);
        
        console.log(parseInt(pagination.current) + 1,pagination.size,data)
        setHots([...data.rows,...hots]);
        setPagination(data);
        setFresh(false);
    }
    return (
        <View style={styles.container}>
            <FlatList
                refreshing={fresh}
                onRefresh={handleFresh}
                data={hots}
                renderItem={({ item }) => (
                <FilmItem film={item} navigation={navigation} isHot={true}></FilmItem>)}
                keyExtractor={item => item._id}
                ItemSeparatorComponent={() => <View style={{height:1,backgroundColor:'#bdbdbd'}}></View>}
            ></FlatList>
        </View>
    )
}

const styles = StyleSheet.create({
    container:{
        flex:1
    }
})